<template>
  <div class="OS">
    <el-tabs v-model="activeName1" @tab-click="handleClick">
      <el-tab-pane label="开通服务" name="first">
        <div class="OpeningService">
          <div class="OS_top">
            <p>开通服务</p>
          </div>
          <div class="OS_chose">
            <div>
              <p>版本选择：</p>
              <el-radio
                v-for="(item, i) in EditionList"
                :key="i"
                v-model="versionMoneyId"
                :disabled="item.Dis"
                :label="item.id"
                border
                >{{ item.name }}</el-radio
              >
              <!-- <el-radio v-model="versionMoneyId" label="2" border>专业版本</el-radio>
                <el-radio v-model="versionMoneyId" label="3" border>企业版本</el-radio> -->
            </div>

            <div style="padding-top: 0">
              <p>开通时长：</p>
              <el-radio v-model="payType" :disabled="firstDis" label="0" border
                >首年费用</el-radio
              >
              <el-radio v-model="payType" :disabled="lastDis" label="2" border
                >续年费用</el-radio
              >
            </div>
          </div>

          <div class="OS_top">
            <p>支付方式</p>
          </div>
          <!-- 支付方式的tabs -->
          <div>
            <el-tabs v-model="activeName" @click="handleClick">
              <!-- 扫码支付 -->
              <el-tab-pane label="扫码支付" name="first">
                <div class="scanCode">
                  <el-checkbox
                    style="position: relative"
                    v-model="payWay"
                    border
                    ><p>扫码支付</p>
                    <p class="txt">jiaxin</p></el-checkbox
                  >
                </div>

                <div class="OS_top" style="margin: 15px 0 0 0">
                  <p>发票信息</p>
                </div>

                <div class="invoice">
                  <div>
                    <p>是否开发票：</p>
                    <el-radio
                      @change="need"
                      v-model="checkInvoiceInfo"
                      label="1"
                      >需要</el-radio
                    >
                    <el-radio v-model="checkInvoiceInfo" label="0"
                      >不需要</el-radio
                    >
                  </div>
                  <div>
                    <p>发票信息</p>
                    <p style="margin: 0 0 0 42px; color: #757575">
                      注：发票内容由其卖家决定，发票由卖家开具并寄出
                    </p>
                  </div>
                  <div>
                    <p>{{ e }}</p>
                    <p>{{ f }}</p>
                    <p :style="{ display: modify }" @click="need">修改</p>
                  </div>
                  <div class="invoice_1">
                    <div :style="{ display: information }">
                      <div>
                        <p>寄送至：</p>
                        <p>{{ a }}</p>
                      </div>

                      <div>
                        <p>收货人：</p>
                        <p>{{ b }}</p>
                      </div>

                      <div>
                        <p>手机号：</p>
                        <p>{{ c }}</p>
                      </div>
                    </div>

                    <div class="invoice_b">
                      <div>
                        <p>销售金额：</p>
                        <p>￥{{ sellMoney }}</p>
                      </div>
                      <div>
                        <p>促销金额：</p>
                        <p>￥{{ PromotionMoney }}</p>
                      </div>
                      <div>
                        <p>实付金额：</p>
                        <p>￥{{ d }}</p>
                      </div>
                      <el-button @click="pay" class="button" type="primary"
                        >提交</el-button
                      >
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <!-- 银行支付(银行转账) -->
              <el-tab-pane label="银行转账" name="second">
                <div class="bank">
                  <div class="bank1">
                    <!-- 自定义的radio -->
                    <el-radio
                      v-for="items in bankList"
                      :key="items.name"
                      v-model="transferBank"
                      :label="items.label"
                      border
                      ><img :src="items.img" alt="" />{{ items.name }}</el-radio
                    >
                  </div>
                  <div class="bank1">
                    <el-radio
                      v-for="items in bankList1"
                      :key="items.name"
                      v-model="transferBank"
                      :label="items.label"
                      border
                      ><img :src="items.img" alt="" />{{ items.name }}</el-radio
                    >
                  </div>
                  <div class="bank1">
                    <el-radio
                      v-for="items in bankList2"
                      :key="items.name"
                      v-model="transferBank"
                      :label="items.label"
                      border
                      ><img :src="items.img" alt="" />{{ items.name }}</el-radio
                    >
                  </div>

                  <div class="OS_top">
                    <p>收款方信息</p>
                  </div>

                  <div class="information">
                    <div style="display: flex">
                      <p>收款方户名：</p>
                      <p>广州市嘉伈软件有限公司</p>
                    </div>
                    <div>
                      <el-radio v-model="radio" label="1">公账</el-radio>
                      <p>收款方银行：</p>
                      <p>{{ bankname }}</p>
                      <p @click="copy" class="copy">复制</p>

                      <el-radio
                        v-model="radio"
                        style="margin-left: 58px"
                        label="2"
                        >私账</el-radio
                      >
                      <p>收款方银行：</p>
                      <p>{{ bankname1 }}</p>
                      <p @click="copy1" class="copy">复制</p>
                    </div>
                    <div>
                      <p>收款方公账：</p>
                      <p>{{ banknumber }}</p>
                      <p @click="copy2" style="margin-left: 17px" class="copy1">
                        复制
                      </p>
                      <p>收款方私账：</p>
                      <p>{{ banknumber1 }}</p>
                      <p @click="copy3" class="copy1">复制</p>
                    </div>
                  </div>

                  <div class="OS_top">
                    <p>付款方信息</p>
                  </div>
                  <div class="drawee">
                    <div>
                      <p>*</p>
                      <p>付款户名：</p>
                      <el-input
                        style="width: 320px"
                        v-model="accountName"
                        placeholder="请输入付款户名"
                      ></el-input>
                    </div>
                    <div>
                      <p>*</p>
                      <p>付款账号：</p>
                      <el-input
                        style="width: 320px"
                        v-model="paymentAccount"
                        placeholder="请输入付款账号"
                      ></el-input>
                    </div>
                    <div>
                      <p>*</p>
                      <p>付款金额：</p>
                      <el-input
                        style="width: 320px"
                        v-model="paymentAmount"
                        disabled=""
                      ></el-input>
                    </div>
                  </div>
                </div>
                <div class="OS_top">
                  <p>发票信息</p>
                </div>

                <div class="invoice">
                  <div>
                    <p>是否开发票：</p>
                    <el-radio
                      @change="need"
                      v-model="checkInvoiceInfo"
                      label="1"
                      >需要</el-radio
                    >
                    <el-radio v-model="checkInvoiceInfo" label="0"
                      >不需要</el-radio
                    >
                  </div>
                  <div>
                    <p>发票信息</p>
                    <p style="margin: 0 0 0 42px; color: #757575">
                      注：发票内容由其卖家决定，发票由卖家开具并寄出
                    </p>
                  </div>
                  <div>
                    <p>{{ e }}</p>
                    <p>{{ f }}</p>
                    <p :style="{ display: modify }" @click="need">修改</p>
                  </div>
                </div>
                <div class="aka">
                  <div :style="{ display: information }">
                    <div>
                      <p>寄送至：</p>
                      <p>{{ a }}</p>
                    </div>

                    <div>
                      <p>收货人：</p>
                      <p>{{ b }}</p>
                    </div>

                    <div>
                      <p>手机号：</p>
                      <p>{{ c }}</p>
                    </div>
                  </div>

                  <div class="invoice_b">
                    <div>
                      <p>销售金额：</p>
                      <p>￥{{ sellMoney }}</p>
                    </div>
                    <div>
                      <p>促销金额：</p>
                      <p>￥{{ PromotionMoney }}</p>
                    </div>
                    <div>
                      <p>实付金额：</p>
                      <p>￥{{ d }}</p>
                    </div>
                    <el-button @click="bankPay" class="button" type="primary"
                      >提交</el-button
                    >
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <!-- 发票 -->
          <!-- 当点击需要发票的时候，显示填写发票信息的组件 -->
          <incoiceIm
            @SpIn="SpIn"
            @ElIn="ElIn"
            :style="{ display: showIncoice }"
            @closeIncoice="closeIncoice"
          >
          </incoiceIm>

          <div class="mask" :style="{ display: showMask }"></div>
          <div id="qrCode" :style="{ display: showQRcode }">
            <div>
              <p>发票信息</p>
              <i @click="closeQRcode" class="el-icon-close"></i>
            </div>
            <div>
              <canvas id="canvas"></canvas>
              <img class="iimg" src="../../assets/pay/8.png" alt="" />
              <div class="keepOut" :style="{ display: showkeepout }">
                <!-- <p>扫码成功</p> -->
                <img src="../../assets/pay/9.png" alt="" />
                <!-- <div style="margin-top:120px;background:white">
                <p style="font-weight:700;color:#017fff;">扫码成功</p>
                </div> -->
              </div>
            </div>
            <div>
              <div>
                <img src="../../assets/pay/1.png" alt="" />
                <p>微信支付</p>
              </div>
              <div>
                <img src="../../assets/pay/2.png" alt="" />
                <p>支付宝</p>
              </div>
              <div>
                <img src="../../assets/pay/3.png" alt="" />
                <p>QQ钱包</p>
              </div>
              <div>
                <img src="../../assets/pay/4.png" alt="" />
                <p>京东钱包</p>
              </div>
              <div>
                <img src="../../assets/pay/5.png" alt="" />
                <p>口碑</p>
              </div>
              <div>
                <img src="../../assets/pay/6.png" alt="" />
                <p>翼支付</p>
              </div>
            </div>
            <div>
              <el-button
                @click="closeQRcode"
                style="margin-right: 10px"
                type="primary"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 充值记录 -->
      <el-tab-pane label="充值记录" name="second">
        <div class="record-pic" v-if="showpic">
          <img src="../../assets/pay/10.png" alt="" />
        </div>
        <div class="qwe" v-for="items in this.orderList" :key="items.id">
          <div class="toExamine">
            <img src="../../assets/pay/7.png" alt="" />
            <p>审核中</p>
          </div>
          <div class="record">
            <p>操作人员：</p>
            <p>{{ people }}</p>
          </div>

          <table class="tab">
            <tr>
              <th>商品名称</th>
              <th>支付类型</th>
              <th>支付方式</th>
              <th>支付时间</th>
              <th>支付金额</th>
              <th>促销金额</th>
              <th>使用周期</th>
              <th>订购状态</th>
            </tr>
            <tr>
              <td>{{ items.versionName }}</td>
              <td>{{ items.payType == 101 ? '线下' : '线上' }}</td>
              <td>{{ items.payType == 101 ? '银行转账' : '微信转账' }}</td>
              <td>{{ items.payTime }}</td>
              <td>{{ items.payMoney }}</td>
              <td>{{ items.buyPromotionMoney }}</td>
              <td>{{ items.periodOfUse }}</td>
              <td>
                {{
                  items.payStatus == 0
                    ? '未支付'
                    : items.payStatus == 1
                    ? '已支付'
                    : '退款'
                }}
              </td>
            </tr>
          </table>

          <div class="record_1">
            <div>
              <div>
                <p>交易流水号：</p>
                <p></p>
                {{ items.serialNumber }}
              </div>
              <div>
                <p>交易订单号：</p>
                <p>{{ items.internalOrderNo }}</p>
              </div>
            </div>

            <div>
              <div>
                <p>创建时间：</p>
                <p>{{ items.creatTime }}</p>
              </div>
              <div>
                <p>支付时间：</p>
                <p>{{ items.payTime }}</p>
              </div>
            </div>

            <div>
              <div>
                <p>退款单号：</p>
                <p>{{ items.refundOrderNumber }}</p>
              </div>
              <div>
                <p>退款时间：</p>
                <p>{{ items.refundTime }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const resources = require('../../config/bank.js')
import incoiceIm from './childComps/InvoiceIm'
import QRCode from 'qrcode'
import { postPayment, getEdition, getOrder } from '../../network/payment'
import { internetProtocol } from '../../config/ip'
export default {
  name: 'opening_service',
  components: {
    incoiceIm,
    QRCode
  },
  /* 
    支付的时候，主要是链接WebSocket来判断后端不断发送过来的响应字段
  */
  created() {
    // 分别截取数组来进行遍历，生成银行转账radio
    this.bankList = resources.bankList.slice(0, 8)
    this.bankList1 = resources.bankList.slice(8, 16)
    this.bankList2 = resources.bankList.slice(16, 19)
    // 获取到版本数据
    this.editionData = JSON.parse(localStorage.getItem('editionData'))
    console.log(this.editionData)
    // version-money/versionMoneyList获取所有版本信息(开通服务的三个版本对象)
    getEdition().then((res) => {
      console.log(res) // 获取所有版本信息(开通服务的三个版本对象)
      console.log(this.editionData)
      // 把三个版本数组赋值给EditionList
      this.EditionList = res.data.data
      for (let i in this.EditionList) {
        // console.log(i, 'index的字符串')
        this.EditionList[i]['Dis'] = false
        // [this.editionData] 直接把这个对象，放在一个数组中，充当item项
        for (let u of [this.editionData]) {
          this.versionMoneyId = u.versionType
          if (u.versionType > this.EditionList[i].id) {
            this.EditionList[i].Dis = true
          }
          if (u.authorization == 0) {
            this.firstDis = false
            this.lastDis = true
            this.payType = '0'
          } else {
            this.firstDis = true
            this.lastDis = false
            this.payType = '2'
          }
        }

        // console.log(i.id)
        if (this.versionMoneyId == this.EditionList[i].id) {
          this.d = this.EditionList[i].buyMoney
        }
      }
    })
    //  订单查询接口 (充值记录要用到)
    getOrder().then((res) => {
      console.log(res.data, '订单查询接口')
      this.orderList = res.data.data
      if (res.data.data.length == 0) {
        // 没有充值记录，让有图片的页面显示
        this.showpic = true
      }
      console.log(this.orderList)
    })

    console.log(this.sid, 'sid---------')
    // protocols 可选
    // 一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议（例如，您可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。
    var ws = new WebSocket(`wss://${internetProtocol}/webSocket/` + this.sid) // 建立 web socket 连接成功触发事件 //接收到消息的回调方法 //接收到消息的回调方法
    //     ws.onopen = function () {
    //         var json = '{a:1,b:2}'
    //          ws.send(json);//可以给后台发送参数
    //         //  console.log(this.sid)
    //     };
    //     ws.onmessage = function (event) {
    //         let _this = this
    // //         alert('数据回来了'+event.data)
    //         console.log(event.data);//后台不间断发送数据，持续接收。
    //         if(event.data == 'scanSuccess'){
    //             // _this.showkeepout = 'block'
    //             _this.payWay = false
    //             console.log(1111111111111111)
    //         }
    //     }
    // WebSocket 在链接成功，的时候，会一直链接着，并且能主动向前端发送销售
    ws.onmessage = (event) => {
      console.log(event, '不断发生的状态') // 这个属性是一个当收到来自服务器的消息时被调用的（拿到服务器返回的数据）
      console.log(event.data, 'showkeepout') // 这个属性是一个当收到来自服务器的消息时被调用的（拿到服务器返回的数据）
      // 当我扫描的时候，会返回这个字段scanSuccess
      if (event.data == 'scanSuccess') {
        // 扫描的时候，那么就让用户去weix确定
        this.showkeepout = 'block'
      }
      // 当我扫码成功之后，WebSocket返回这个paySuccess
      if (event.data == 'paySuccess') {
        // this.$router.go(0)
        // alert('支付成功')
        this.$message({
          message: '支付成功',
          type: 'success'
        })
        // 支付成功，直接调转到登录页面
        setTimeout(() => {
          this.$router.push('/login')
        }, 1000)
      }
    } //断开 web socket 连接成功触发事件
    ws.onclose = function () {
      console.log('支付连接已关闭...')
    }
    ws.onerror = function (event) {
      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
      console.log(error)
    }
  },
  data() {
    return {
      lastDis: false,
      firstDis: false,
      editionData: [], //版本信息
      showpic: false,
      // sid:Date.parse(new Date()),//时间戳
      showkeepout: 'none',
      sid: Math.random().toString(36).substring(2, 7), // substring() 方法返回字符串的子字符串。
      orderList: [],
      people: '18664766666',
      bankList: [],
      bankList1: [],
      bankList2: [],
      radio: '',
      transferBank: '',
      showMask: 'none',
      showQRcode: 'none',
      // URLList: '',
      EditionList: [],
      ElInList: [],
      SpInList: [],
      modify: 'none',
      information: 'none',
      showIncoice: 'none',
      activeName: 'first',
      activeName1: 'first',
      billingType: '',
      payWay: true,
      accountName: '',
      paymentAmount: '',
      paymentAccount: '',
      versionMoneyId: '', //版本
      payType: '0',
      checkInvoiceInfo: '0', //是否开发票
      // transferBank:'',
      a: '',
      b: '',
      c: '',
      d: '',
      e: '',
      f: '',
      bankname: '中国工商银行（华南支行）',
      bankname1: '中国工商银行（同福中路支行）',
      banknumber: '3602 0244 0920 0766 787',
      banknumber1: '6217 2336 0200 3789 647',
      beneficiaryBank: '',
      receivingAccount: '',
      PromotionMoney: '',
      sellMoney: ''
    }
  },
  mounted() {
    console.log(this.sid, 'mounted')
  },
  methods: {
    copy() {
      // 这个是复制的插件的方法
      this.$copyText(this.bankname).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },
    copy1() {
      this.$copyText(this.bankname1).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },

    copy2() {
      this.$copyText(this.banknumber).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },
    copy3() {
      this.$copyText(this.banknumber1).then(
        function (e) {
          alert('已复制')
        },
        function (e) {
          alert('复制失败')
        }
      )
    },
    // 点击底部提交按钮的时候，触发的函数
    pay() {
      let obj = {
        versionMoneyId: Number(this.versionMoneyId),
        payWay: this.payWay == true ? 0 : 2,
        checkInvoiceInfo: Number(this.checkInvoiceInfo), //是否开发票
        paymentAmount: this.paymentAmount, //付款金额

        payType: Number(this.payType),
        sid: this.sid,

        // 电子发票信息
        email: this.ElInList.email,
        headName: this.ElInList.headName,
        companyName: this.ElInList.companyName,
        taxpayerNumber: this.ElInList.taxpayerNumber,
        invoiceType: this.ElInList.invoiceType,
        billingType: this.ElInList.billingType,

        // 专用发票
        // companyName:this.companyName,
        // taxpayerNumber:this.taxpayerNumber,//纳税人识别号
        companyAddress: this.SpInList.companyAddress,
        phone: this.SpInList.phone,
        name: this.SpInList.name,
        draweePhone: this.SpInList.draweePhone,
        province: this.SpInList.province,
        city: this.SpInList.city,
        area: this.SpInList.area,
        detailedAddress: this.SpInList.detailedAddress,
        postCode: this.SpInList.postCode
      }
      if (obj.payWay == 2) {
        this.$message.warning({ message: '请勾选支付方式', offset: 400 })
        return
      }
      console.log(obj)
      // 获取支付请求api （WebSocket已经在created生命周期中创建完成（链接成功，会一直处于在线的状态），点击提交的时候，响应回来状态判断就行，参数中告诉了webscoked我已经调用）
      postPayment(obj).then((res) => {
        console.log(res, 'postPayment获取支付请求api')
        // this.URLList = res.data.data
        // console.log(this.URLList)
        if (res.data.code == 200) {
          // 获取页面要生成的二维码的容器DOM
          let canvas = document.getElementById('canvas')
          //调用插件QRCode生成二维码 （第一个参数容器DOM canvas；/第二个参数:生成的二维码为URL地址js;）（动态生成二维码）
          QRCode.toCanvas(
            canvas,
            String(res.data.data), // 生成的二维码为URL地址js(用户扫描,直接去到微信等第三方提供的地址，去支付)
            { height: 270, width: 270 }, // 样式
            function (error) {
              // 成功或者错误的回调
              if (error) console.error(error)
              console.log('QRCode success!')
            }
          )
          //  这是后端返回来一个链接的手机页面（第三方返回的支付页面）（就是一个微信的支付页面，这个页面只有使用支付软件才能支持）
          // console.log(res.data.data, '111111')
          // 让支付二维码的dislog显示
          this.showMask = 'block'
          this.showQRcode = 'block'
          // this.sid = ''
        }
      })
    },
    // useqrcode(){
    // // let canvas = new QRCode('canvas', {
    // // 	      width: 200,  // 二维码宽度
    // // 	      height: 200, // 二维码高度
    // // 	      text: 'this.URLList'
    // // 	  })
    // },
    ElIn(data) {
      // console.log(data)
      this.modify = 'block'
      this.information = 'none'
      this.e = '电子普通发票'
      this.ElInList = data
      // console.log(this.ElInList)
      for (const i in this.ElInList) {
        if (this.ElInList.invoiceType == 0) {
          this.f = '个人'
        } else {
          this.f = this.ElInList.companyName
        }
      }
      this.showIncoice = 'none'
    },
    SpIn(data) {
      this.modify = 'block'
      this.e = '专用发票'
      this.information = 'block'

      this.SpInList = data
      for (const i in this.SpInList) {
        this.f = this.SpInList.companyName
        this.a = `${this.SpInList.province} ${this.SpInList.city} ${this.SpInList.area} ${this.SpInList.detailedAddress}`
        this.b = this.SpInList.name
        this.c = this.SpInList.draweePhone
      }
      this.showIncoice = 'none'
    },

    bankPay() {
      for (const i of resources.bankList) {
        if (this.transferBank == i.label) {
          this.transferBank = i.name
        }
      }
      if (this.radio == '1') {
        this.beneficiaryBank = this.bankname
        this.receivingAccount = this.banknumber
      } else if (this.radio == '2') {
        this.beneficiaryBank = this.bankname1
        this.receivingAccount = this.banknumber1
      }
      if (this.transferBank == '') {
        this.$message.warning({ message: '请选择银行', offset: 400 })
        return
      }
      if (this.radio == '') {
        this.$message.warning({ message: '请选择公账或是私账', offset: 400 })
        return
      }
      if (this.accountName == '' || this.paymentAccount == '') {
        this.$message.warning({
          message: '请填写付款户名和付款账号',
          offset: 400
        })
        return
      }
      let obj = {
        versionMoneyId: Number(this.versionMoneyId), //版本
        transferBank: this.transferBank, //银行
        // 电子发票信息
        email: this.ElInList.email,
        headName: this.ElInList.headName,
        companyName: this.ElInList.companyName,
        taxpayerNumber: this.ElInList.taxpayerNumber,
        invoiceType: this.ElInList.invoiceType,
        billingType: this.ElInList.billingType, //发票类型 1为专用发票

        payType: Number(this.payType), //支付类型 购买或升级
        payWay: 1, //支付方式
        sid: this.sid,
        checkInvoiceInfo: Number(this.checkInvoiceInfo), //是否开发票
        // 专用发票
        // companyName:this.companyName,
        // taxpayerNumber:this.taxpayerNumber,//纳税人识别号
        companyAddress: this.SpInList.companyAddress,
        phone: this.SpInList.phone,
        name: this.SpInList.name,
        draweePhone: this.SpInList.draweePhone,
        province: this.SpInList.province,
        city: this.SpInList.city,
        area: this.SpInList.area,
        detailedAddress: this.SpInList.detailedAddress,
        postCode: this.SpInList.postCode,
        accountName: this.accountName, //付款户名
        paymentAccount: this.paymentAccount, //付款账号
        paymentAmount: this.paymentAmount, //付款金额
        beneficiaryBank: this.beneficiaryBank,
        receivingAccount: this.receivingAccount
      }
      postPayment(obj).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message.success({ message: '提交成功', offset: 400 })
        }
      })
      this.transferBank = ''
      console.log(obj)
    },
    // 点击支付二维码页面的dialog的时候，关闭这个对话框，并且刷新页面
    closeQRcode() {
      this.showQRcode = 'none'
      this.showMask = 'none'
      this.$router.go(0)
    },
    need() {
      this.showIncoice = 'block'
    },
    closeIncoice() {
      this.showIncoice = 'none'
      this.checkInvoiceInfo = '0'
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
  watch: {
    versionMoneyId(a, b) {
      console.log(a)
      // console.log(this.payType)
      for (let c of [this.editionData]) {
        if (Number(a) > c.versionType) {
          this.firstDis = false
          this.lastDis = true
          this.payType = '0'
        }

        if (Number(a) == c.versionType && c.authorization == 0) {
          this.firstDis = false
          this.lastDis = true
          this.payType = '0'
        } else if (Number(a) == c.versionType && c.authorization == 1) {
          this.firstDis = true
          this.lastDis = false
          this.payType = '2'
        }
      }

      for (let i of this.EditionList) {
        if (a == i.id && this.payType == 0) {
          if (i.isPromotion == 0) {
            this.d = i.buyMoney
            this.PromotionMoney = i.buyPromotionMoney
            this.sellMoney = i.buyMoney
          } else {
            this.d = i.buyPromotionMoney
            this.PromotionMoney = i.buyPromotionMoney
            this.sellMoney = i.buyMoney
          }
        }
        if (a == i.id && this.payType == 2) {
          if (i.isPromotion == 0) {
            this.d = i.renewalMoney
            this.sellMoney = i.renewalMoney
            this.PromotionMoney = i.renewalPromotionMoney
          } else {
            this.d = i.renewalPromotionMoney
            this.sellMoney = i.renewalMoney
            this.PromotionMoney = i.renewalPromotionMoney
          }
        }
      }
    },
    payType(a, b) {
      for (let u of this.EditionList) {
        if (a == 0 && this.versionMoneyId == u.id) {
          if (u.isPromotion == 0) {
            this.d = u.buyMoney
            this.PromotionMoney = u.buyPromotionMoney
            this.sellMoney = u.buyMoney
          } else {
            this.d = u.buyPromotionMoney
            this.PromotionMoney = u.buyPromotionMoney
            this.sellMoney = u.buyMoney
          }
        }
        if (a == 2 && this.versionMoneyId == u.id) {
          if (u.isPromotion == 0) {
            this.d = u.renewalMoney
            this.sellMoney = u.renewalMoney
            this.PromotionMoney = u.renewalPromotionMoney
          } else {
            this.d = u.renewalPromotionMoney
            this.sellMoney = u.renewalMoney
            this.PromotionMoney = u.renewalPromotionMoney
          }
        }
      }
    }
  }
  // mounted(){
  //         this.useqrcode();
  //   },
}
</script>
<style scoped>
.OS {
  margin: 5px 10px 0 0;
  padding: 0 15px;
  background-color: white;
  /* height: 88.5vh; */
  height: 130%;
  position: relative;
  padding-top: 15px;
}
.OS_top {
  background: #f4f4f4;
  padding: 10px 15px;
  /* margin: 15px 0; */
}
.OS_top p {
  font-weight: 700;
}
.OS_chose div {
  display: flex;
  padding: 10px 0 10px 15px;
}
.OS_chose > div > p {
  margin: 4px 6px 0 0;
}
/* .scanCode{
    position: absolute;
    right: 10px;
    top: 12px;
} */
.invoice > div:not(:nth-child(3)):not(:nth-child(4)) {
  display: flex;
  padding-left: 15px;
  margin-top: 15px;
}
.invoice > div:nth-child(3) {
  padding-left: 121px;
  display: flex;
  margin-top: 5px;
}
.invoice > div:nth-child(3) > p {
  margin-right: 32px;
}
.invoice > div:nth-child(3) > p:last-child {
  color: #017fff;
}
.invoice > div:nth-child(3) > p:last-child:hover {
  cursor: pointer;
}
/* .invoice>div:last-child{
    background: #f4f4f4;
    padding: 15px;
    margin-top: 15px;
    position: relative;
    height: 103px;
} */
.invoice_1 {
  background: #f4f4f4;
  padding: 15px;
  margin-top: 15px;
  position: relative;
  height: 139px;
}
.invoice_1 > div > div {
  display: flex;
}
/* .invoice>div:last-child>div>div{
    display: flex;
} */
.aka {
  background: #f4f4f4;
  padding: 15px;
  margin-top: 15px;
  position: relative;
  height: 139px;
  margin-bottom: 20px;
}
.aka div:not(:last-child) > div {
  display: flex;
}
.invoice_b {
  position: absolute;
  right: 20px;
  top: 20px;
}
.invoice_b > div {
  display: flex;
}
.invoice_b div:nth-child(3) {
  margin-top: 5px;
}
.invoice_b div:nth-child(3) > p:last-child {
  color: #017fff;
  font-size: 25px;
  margin: -10px 0 0 -10px;
}
.button {
  margin: 8px 0 0 130px;
}
.OpeningService .bank .bank1 img {
  position: absolute;
  bottom: 10px;
  right: 25px;
}
.bank1 {
  margin-bottom: 8px;
  font-size: 15px;
}
.information {
  padding: 10px;
}
.information div:not(:first-child) {
  display: flex;
  padding-top: 15px;
}
.information > div:first-child {
  font-weight: 700;
  padding-left: 82px;
}
.font_size {
  font-weight: 700;
  /* font-size: 17px; */
  margin-right: 50px;
}
.information > div:last-child > p:first-child {
  margin: 0 0 0 82px;
}
.information > div:last-child > p:nth-child(4) {
  margin: 0 0 0 151px;
}
.copy {
  margin: 0 5px 0 15px;
  color: #017fff;
}
.copy1 {
  margin: 0 0 0 41px;
  color: #017fff;
}
.copy,
.copy1:hover {
  cursor: pointer;
}
#qrCode {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -230px;
  width: 500px;
  height: 450px;
  background: white;
  text-align: center;
  z-index: 999;
  /* justify-content: center; */
  /* 　　align-items: center; */
}
#qrCode > div:first-child {
  background: #f4f4f4;
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 10px 15px;
}
#qrCode > div:first-child p {
  font-weight: 700;
}
#qrCode > div:nth-child(3) {
  display: flex;
  justify-content: space-around;
}
#qrCode > div:last-child {
  float: right;
  margin-top: 10px;
}
.canvas {
  position: relative;
}
.iimg {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: white;
  padding: 10px;
  width: 70px;
  height: 70px;
  border-radius: 4px;
}
.keepOut {
  width: 270px;
  height: 270px;
  z-index: 1000;
  /* background: #000; */
  /* opacity: 0.3; */
  background-color: rgba(68, 66, 66, 0.7);
  position: absolute;
  top: 10%;
  left: 23%;
  text-align: center;
}
.keepOut img {
  width: 230px;
  height: 50px;
  margin-top: 105px;
  color: rgba(26, 223, 19, 0.7);
  font-weight: 700;
  z-index: 1001;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.txt {
  position: absolute;
  right: 12px;
  top: 9px;
  font-weight: 700;
  color: #017fff;
}
.drawee {
  padding: 10px 15px;
}
.drawee div {
  display: flex;
  margin: 5px 0;
}
.drawee div p:first-child {
  color: red;
  margin: 0 3px 0 0;
}
.drawee p {
  padding-top: 7px;
}

/* 记录 */
.toExamine {
  display: flex;
  padding: 8px 15px;
  height: 40px;
  background: #f4f4f4;
}
.toExamine img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: #017fff;
  mix-blend-mode: blue;
}
.record {
  display: flex;
  margin: 15px 0;
  background: white;
}
.record_1 {
  display: flex;
  padding: 10px 15px;
  margin: 20px 0;
  background: white;
}
.record_1 > div {
  width: 32%;
}
.record_1 > div:not(:first-child) {
  border-left: 1px solid #f4f4f4;
  padding-left: 15px;
}
.record_1 > div > div {
  display: flex;
}
.record_1 > div > div > p {
  margin-bottom: 5px;
}
table.tab {
  font-family: verdana, arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  padding: 0;
  height: 80px;
  border-bottom: 2px solid #f4f4f4;
}
table.tab th {
  border-color: #666666;
  background-color: #f4f4f4;
  padding: 5px 0;
}
table.tab th,
table.tab td {
  text-align: center;
}
.table.tab td {
  background: white;
  height: 50px;
  /* border-bottom: 2px solid #f4f4f4; */
}
.record-pic {
  margin-left: 40%;
}
</style>

<style>
/* .content_1{
    background: white;
} */
.OpeningService .OS_chose .el-radio {
  margin-right: 2px;
  padding: 7px 11px 0 9px;
  height: 30px;
}
.OpeningService .scanCode .el-checkbox.is-bordered {
  width: 150px;
  position: relative;
}
.OpeningService .invoice .el-radio {
  margin: 5px 30px 0 10px;
}
/* .OpeningService .bank .bank1 .el-radio{
    margin-right: 2px;
    padding: 5px 11px 0 9px;
    height: 35px;
  } */
.OpeningService .bank .bank1 .el-radio {
  padding: 10px 65px 0 28px;
  margin-right: 3px;
  height: 40px;
  position: relative;
}
.OpeningService .bank .bank1 .el-radio__label {
  padding-left: 15px;
  font-size: 17px;
}
.OpeningService .drawee .el-input__inner {
  height: 30px;
}
.OpeningService .information .el-radio__label {
  font-size: 17px;
  color: black;
  font-weight: 700;
}
</style>
